@use 'sass:map';
@use 'sass:math';
$colors: () !default;
$colors: map.deep-merge(
  (
    'white': #ffffff,
    'black': #000000,
    'primary': (
      'base': #40A9FF,
    ),
    'success': (
      'base': #67C23A,
    ),
    'warning': (
      'base': #E6A23C,
    ),
    'danger': (
      'base': #F56C6C,
    ),
    'error': (
      'base': #F56C6C,
    ),
    'info': (
      'base': #909399,
    ),
  ),
  $colors
);
$color-white: map.get($colors, 'white') !default;

$color-black: map.get($colors, 'black') !default;
$color-primary: map.get($colors, 'primary', 'base') !default;
$color-success: map.get($colors, 'success', 'base') !default;
$color-warning: map.get($colors, 'warning', 'base') !default;
$color-danger: map.get($colors, 'danger', 'base') !default;
$color-error: map.get($colors, 'error', 'base') !default;
$color-info: map.get($colors, 'info', 'base') !default;
$types: primary, success, warning, danger, error, info;

@forward "element-plus/theme-chalk/src/common/var.scss" with
(
  $colors: $colors,
);

@mixin set-color-type-light($type, $number) {
  $colors: map.deep-merge(
    (
      $type: (
        'light-#{$number}':
          mix(
            $color-white,
            map.get($colors, $type, 'base'),
            math.percentage(math.div($number, 10))
          ),
      ),
    ),
    $colors
  ) !global;
}
// mix color with black
@mixin set-color-type-dark($type, $number) {
  $colors: map.deep-merge(
    (
      $type: (
        'dark-#{$number}':
          mix(
            $color-black,
            map.get($colors, $type, 'base'),
            math.percentage(math.div($number, 10))
          ),
      ),
    ),
    $colors
  ) !global;
}
// @debug math.percentage(math.div(2, 10));
@for $i from 1 through 9 {
  @each $type in $types {
    @include set-color-type-light($type, $i);
  }
}
@each $type in $types {
  @include set-color-type-dark($type, 2);
}